<template>
	<div class="activity-data-panel">
		<el-row :gutter="20">
			<el-col :span="6" v-for="(item,index) in list" :key="index">
				<el-card>
					<div class="card-data-view">
						<div class="data-num">{{item.num}}{{item.unit}}</div>
						<div class="data-tips">{{item.explain}}</div>
						<div class="data-icon">
							<el-tooltip class="item" effect="dark" :content="item.tips" placement="left-start">
								<span class="el-icon-warning-outline"></span>
							</el-tooltip>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {};
		},
		watch: {},
		mounted() {},
		beforeDestroy() {},
		methods: {}
	};
</script>

<style lang="scss">
	.activity-data-panel {
		.el-card__body {
			position: relative;
			padding: 20px 20px;
		}

		.card-data-view {


			.data-num {
				font-size: 24px;
			}

			.data-tips {
				margin-top: 10px;
				font-size: 16px;
				color: #b0b0b0;
			}

			.data-icon {
				position: absolute;
				top: 2px;
				right: 6px;
				font-size: 20px;
			}
		}
	}
</style>
